<!DOCTYPE html>
<html lang="en">
  <head>
    
      <title>vue防止用户恶意点击按钮 :: Rennan Blog — We can exchange and study together</title>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="vue防止用户恶意点击按钮 使用disabled方法配合setTimeout事件来实现
&amp;lt;button @click=&amp;quot;sub&amp;quot; :disabled=&amp;quot;isdisable&amp;quot;&amp;gt;确定&amp;lt;/button&amp;gt;值为flase时按钮可以点击 为true时不可以点击 值默认为false 点击时变为true
&amp;lt;script&amp;gt;export default {data () {return {//防止恶意评论isdisable:false, }},&amp;lt;/script&amp;gt;设置事件延迟方法
sub(){this.isdisable = truesetTimeout(()=&amp;gt;{this.isdisable = false //设置执行的代码alert(&#39;请稍后点击&#39;)},2000 //设置多长时间后执行该代码 单位(毫秒) }"/>
<meta name="keywords" content=""/>
<meta name="robots" content="noodp"/>
<link rel="canonical" href="/my_blog/vue/two/" />





<link rel="stylesheet" href="/my_blog/assets/style.css">


<link rel="stylesheet" href="/my_blog/style.css">


<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/my_blog/img/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/my_blog/img/favicon.png">


<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="vue防止用户恶意点击按钮"/>
<meta name="twitter:description" content="vue防止用户恶意点击按钮 使用disabled方法配合setTimeout事件来实现
&lt;button @click=&quot;sub&quot; :disabled=&quot;isdisable&quot;&gt;确定&lt;/button&gt;值为flase时按钮可以点击 为true时不可以点击 值默认为false 点击时变为true
&lt;script&gt;export default {data () {return {//防止恶意评论isdisable:false, }},&lt;/script&gt;设置事件延迟方法
sub(){this.isdisable = truesetTimeout(()=&gt;{this.isdisable = false //设置执行的代码alert(&#39;请稍后点击&#39;)},2000 //设置多长时间后执行该代码 单位(毫秒) }"/>



<meta property="og:title" content="vue防止用户恶意点击按钮" />
<meta property="og:description" content="vue防止用户恶意点击按钮 使用disabled方法配合setTimeout事件来实现
&lt;button @click=&quot;sub&quot; :disabled=&quot;isdisable&quot;&gt;确定&lt;/button&gt;值为flase时按钮可以点击 为true时不可以点击 值默认为false 点击时变为true
&lt;script&gt;export default {data () {return {//防止恶意评论isdisable:false, }},&lt;/script&gt;设置事件延迟方法
sub(){this.isdisable = truesetTimeout(()=&gt;{this.isdisable = false //设置执行的代码alert(&#39;请稍后点击&#39;)},2000 //设置多长时间后执行该代码 单位(毫秒) }" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/my_blog/vue/two/" />
<meta property="article:published_time" content="2020-04-03T14:38:53+08:00" />
<meta property="article:modified_time" content="2020-04-03T14:38:53+08:00" /><meta property="og:site_name" content="Rennan Blog" />






  </head>
  <body class="">
    <div class="container">
      <header class="header">
  <span class="header__inner">
    <a href="/my_blog/" class="logo" style="text-decoration: none;">
  
    <span class="logo__mark"><svg xmlns="http://www.w3.org/2000/svg" class="greater-icon" viewBox="0 0 44 44">
  <path fill="none" d="M15 8l14.729 14.382L15 35.367"/>
</svg>
</span>
    <span class="logo__text">Welcome</span>
    <span class="logo__cursor"></span>
  
</a>

    <span class="header__right">
      
        <nav class="menu">
  <ul class="menu__inner menu__inner--desktop">
    
      
        
          <li><a href="/my_blog/resume">resume</a></li>
        
      
        
          <li><a href="/my_blog/vue">vue</a></li>
        
      
      
    
  </ul>

  <ul class="menu__inner menu__inner--mobile">
    
      
        <li><a href="/my_blog/resume">resume</a></li>
      
    
      
        <li><a href="/my_blog/vue">vue</a></li>
      
    
  </ul>
</nav>

        <span class="menu-trigger">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
          </svg>
        </span>
      
      <span class="theme-toggle">
        <svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
  3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
  13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
</svg>

      </span>
    </span>
  </span>
</header>


      <div class="content">
        
  
  

  <div class="post">
    <h2 class="post-title"><a href="/my_blog/vue/two/">vue防止用户恶意点击按钮</a></h2>
    <div class="post-meta">
      
        <span class="post-date">
          3046-08-03
        </span>

        
      

      
      
    </div>

    

    

    <div class="post-content">
      <h3 id="vue防止用户恶意点击按钮">vue防止用户恶意点击按钮</h3>
<p><strong>使用disabled方法配合setTimeout事件来实现</strong></p>
<pre><code>&lt;button @click=&quot;sub&quot; :disabled=&quot;isdisable&quot;&gt;确定&lt;/button&gt;
</code></pre><p>值为flase时按钮可以点击 为true时不可以点击 值默认为false  点击时变为true</p>
<pre><code>&lt;script&gt;
	export default {
  data () {
    return {
     //防止恶意评论
	  isdisable:false,  
    }
  },
&lt;/script&gt;
</code></pre><p>设置事件延迟方法</p>
<pre><code>sub(){
		  this.isdisable = true
		  setTimeout(()=&gt;{
			  this.isdisable = false   //设置执行的代码
              alert('请稍后点击')
		  },2000 //设置多长时间后执行该代码 单位(毫秒) 
		    
	  }
</code></pre>
    </div>
    


    
      
    

    </div>

      </div>

      
        <footer class="footer">
  <div class="footer__inner">
    
      <a href="/my_blog/" class="logo" style="text-decoration: none;">
  
    <span class="logo__mark"><svg xmlns="http://www.w3.org/2000/svg" class="greater-icon" viewBox="0 0 44 44">
  <path fill="none" d="M15 8l14.729 14.382L15 35.367"/>
</svg>
</span>
    <span class="logo__text">Welcome</span>
    <span class="logo__cursor"></span>
  
</a>

      <div class="copyright">
        <span>© 2020 Powered by <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a></span>
        <span>Theme created by <a href="https://twitter.com/panr" target="_blank" rel="noopener">panr</a></span>
      </div>
    
  </div>
</footer>

<script src="/my_blog/assets/main.js"></script>
<script src="/my_blog/assets/prism.js"></script>


      
    </div>

    
  </body>
</html>
